<template>
  <lay-card style="height: 100%">
    <lay-container>
      <lay-row space="30" style="margin-top: 15px">
        <lay-col md="4">
          <lay-input v-model="queryForm.target" size="sm" class="queryForm">
            <template #prepend>分类</template>
          </lay-input>
        </lay-col>
        <lay-col md="4">
          <lay-input v-model="queryForm.name" size="sm" class="queryForm">
            <template #prepend>名称</template>
          </lay-input>
        </lay-col>
        <lay-col md="4">
          <lay-input v-model="queryForm.description" size="sm" class="queryForm">
            <template #prepend>描述</template>
          </lay-input>
        </lay-col>
        <lay-col md="4">
          <lay-button type="normal" @click="queryParams">查询</lay-button>
          <lay-button @click="resetFrom">重置</lay-button>
          <lay-button type="normal" @click="setParams(null)">新增</lay-button>
        </lay-col>
      </lay-row>
      <lay-row space="20">
        <lay-col md="24">
          <lay-table
            :page="page"
            :height="'500px'"
            :columns="columns"
            :loading="loading"
            :data-source="dataSource"
            @change="change"
          >
          <template v-slot:toolbar>
            <lay-row space="10">
              <lay-col md="18">
                <h3>系统参数表(切勿随意修改)</h3>
              </lay-col>
            </lay-row>
          </template>
          <template v-slot:operator="{ row }">
            <lay-button size="xs" type="normal" @click="setParams(row)">更新</lay-button>
            <lay-button size="xs" type="danger" @click="deleteParams(row)">删除</lay-button>
          </template>
        </lay-table>
        </lay-col>
      </lay-row>
    </lay-container>
  </lay-card>
</template>

<script lang="ts">
export default {
  name: "ParamsSet"
}
</script>

<script lang="ts" setup>
import {h, onMounted, reactive, ref} from "vue";
import {notify} from "../../../untils/tip";
import {
  countParamsApi,
  deleteParamsApi,
  queryParamsApi,
} from "../../../api/market/basic";
import {layer} from "@layui/layui-vue";
import ConfigParams from "../../../components/Market/ConfigParams.vue";

// 初始变量
const loading = ref(false);
const page = reactive({ current: 1, limit: 10, total: 10 });



// 查询参数
const queryForm = reactive({
    target: null,
    name: null,
    description: null,
    pageNo: 0,
    pageSize: 10,
});

const columns = ref([
    { title:"编号", width: "5%", key:"id", fixed: "left", sort: "desc" },
    { title:"分类", width: "10%", key:"target", sort: "desc" },
    { title:"排序", width: "5%", key:"rowIndex", sort: "desc" },
    { title:"名称", width: "15%", key:"name", sort: "desc" },
    { title:"取值", width: "15%", key:"value"},
    { title:"描述", width: "25%", key:"description"},
    { title:"更新时间", width: "10%", key:"updateTime", sort: "desc" },
    { title:"操作", width: "15%", customSlot:"operator", key:"operator", fixed: "right" }
]);
const dataSource = ref([]);

// 关联策略的下拉列表
const strategies = ref([]);

// 页面加载前的运行方法
onMounted(()=>{
  queryParams();
});


// 函数方法
const queryParams = () => {
  page.current = 1;
  countParams();
  loadDataSource();
}

const change = () => {
  loading.value = true;
  setTimeout(() => {
    loadDataSource();
    loading.value = false;
  }, 1000);
};

const resetFrom = () => {
  queryForm.target = null;
  queryForm.name = null;
  queryForm.description = null;
  queryForm.pageSize = 10;
  queryForm.pageNo = 0;
};

const countParams = async () => {
  let {data, code, message} = await countParamsApi(queryForm)
  if(code === 200){
    page.total = data;
  }else {
    notify('fail', message);
  }
};

const loadDataSource = async () => {
  dataSource.value = [];
  queryForm.pageNo = (page.current - 1)*page.limit;
  queryForm.pageSize = page.limit;
  let {code, data, message} = await queryParamsApi(queryForm)
  if(code === 200){
    dataSource.value = data;
  }else {
    notify('fail', message);
  }
};

const layId = ref();

const setParams = function(row: any) {
    const targetParams = reactive({
      id: null,
      target: null,
      rowIndex: null,
      name: null,
      value: null,
      description: null
    });
    const mode = ref('insert');
    if(row !== null){
      mode.value = 'update';
      targetParams.id = row.id;
      targetParams.target = row.target;
      targetParams.rowIndex = row.rowIndex;
      targetParams.name = row.name;
      targetParams.value = row.value;
      targetParams.description = row.description
    }
    layId.value = layer.open({
        type: "page",
        title: "参数编辑",
        content: h(ConfigParams, {
          operate: mode.value,
          unitForm: targetParams,
          loadData: function (){
            loadDataSource();
            layer.close(layId.value);
          },
          cancelLay: function (){
            layer.close(layId.value);
          }
        })
    })
};

const deleteParams = (row: any) => {
    layer.confirm("你确定要删除吗",
        {
            btn: [
                {text:'确定', callback: (id) => {
                    deleteParamsRow(row);
                    layer.close(id); }
                },
                {text:'取消', callback: (id) => {
                    layer.close(id); }
                }
            ]
        }
    );
};

const deleteParamsRow = async (row: any) => {
  if(row.target === 'system'){
    layer.msg("不允许删除的系统参数！", {icon: 7, time: 1000})
  }else {
    let {data, code, message} = await deleteParamsApi({id: row.id});
    if(code === 200){
      await loadDataSource();
      notify('success', message);
    }else {
      notify('fail', message);
    }
  }
};

</script>

<style scoped>

</style>